<template>
  <div class="option">
    <span>选项</span>
    <div class="radio-group-box">
      <el-radio-group v-for="(item,index) in number " :key="index" v-model="radio">
        <el-radio :label="`${item}:`" />
        <div class="input">
          <el-input />
        </div>
        <upload />
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import upload from './uploadimg.vue'
import { number, az } from './editor'
export default {
  components: {
    upload
  },
  props: {
    addoption: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      number: number,
      radio: '',
      addnumber: 4
    }
  },
  watch: {
    addoption() {
      const istrue = this.addnumber === az.length
      if (!istrue) {
        this.number.push(az[this.addnumber++])
      } else {
        this.number.push(az[0])
        this.addnumber = 1
      }
    }
  }
}
</script >

  <style lang="scss" scoped>
  .option{
    display: flex;
      span{
        padding: 20px 0px  0px 0px ;
        margin-right: 10px;
      }
  }
  .el-radio-group{
    margin: 10px 0;
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .el-radio{
    margin-right:10px;
  }
  .input{
    margin-right: 10px;
  }
  </style>
